<template>
	<div id="app">
		<div class="title">抽奖</div>
		<el-tabs @tab-click="onTabChange" type="card" v-model="curTab">
			<el-tab-pane label="中奖记录" name="prizeRecord">
				<prize-record v-if="curTab == 'prizeRecord'"></prize-record>
			</el-tab-pane>

			<el-tab-pane label="商品设置" name="setGoods">
				<set-goods v-if="curTab == 'setGoods'"></set-goods>
			</el-tab-pane>

			<el-tab-pane label="规则" name="rule" class="luck_rules">
				<div class="editor" id="editor" ref="editor"></div>
				<el-button @click="updateRule" :loading="ruleLoading" type="primary">立即保存</el-button>
			</el-tab-pane>

		</el-tabs>
	</div>
</template>

<script>
import fetch from '@/api/axios';
import E from "wangeditor";
import PrizeRecord from './prizeRecord';
import SetGoods from './setGoods';
export default {
    components: {
        'prize-record': PrizeRecord,
        'set-goods': SetGoods,
    },
	data() {
		return {
            curTab: 'prizeRecord',
			editor: null,
			ruleLoading: false,
		};
	},
	created(){
        this.getRule();
	},
	methods: {
        onTabChange(tab){
            let name = tab.name;
            this.curTab = name;
		},
		getRule(){
			fetch.get('/api/console/lottery/intro').then(res=>{
				let data = res.data;
				if(data.code == 0){
					this.editor.txt.html(data.data.intro);
				}else{
					this.$message.error(data.message);
				}
			}).catch(err=>{
				this.$message.error('网络连接失败，请稍后重试');
			});
		},
		updateRule(){
			this.ruleLoading = true;
			fetch.post('/api/console/lottery/intro',{
				intro: this.editor.txt.html()
			}).then(res=>{
				let data = res.data;
				if(data.code == 0){
					this.$message.success('修改成功');
				}else{
					this.$message.error(data.message);
				}
			}).catch(err=>{
				this.$message.error('网络连接失败，请稍后重试');
			}).finally(()=>{
				this.ruleLoading = false;
			});
		}
	},
	mounted() {
		let _this = this;
		if(!_this.editor){
			_this.editor = new E("#editor");
			_this.editor.customConfig.menus = ["bold","fontSize","fontName",'italic',"underline",'strikeThrough',"foreColor","backColor","link","justify",'quote',"image",'video',"code"];
			_this.editor.create();
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
  margin-bottom: 25px;
  font-size: 21px;
  margin-top: 65px;
}
#editor{
	margin-top:20px;
	margin-bottom:40px;
	height:300px;
	width:730px;
}
.shop_set{
	margin-top:20px;
	margin-bottom:40px;
}
.blue,.gray{
	cursor: pointer;
}
.addShop{
	cursor: pointer;
	font-size: 14px;
	margin-left: 22px;
	color: #b6b6b6;
}
.infoInput{
	overflow: auto;
	._inDiv{
		display: inline-block;
		margin-right:15px;
		position:relative;
		.closes{
			width: 17px;
			height: 17px;
			position: absolute;
			right: -8px;
			top: 0;
			z-index: 1;
			cursor: pointer;
		}
		._input{
			width:70px;
		}
	}
	&::-webkit-scrollbar {
		width : 10px;
		height: 5px;
	}
	&::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);
		background   : #ccc;
	}
	&::-webkit-scrollbar-track {
		box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);
		border-radius: 10px;
		background   : #F9F9F9;
	}
}
</style>
<style lang="scss">
.luck_rules .w-e-toolbar{
	.w-e-menu {
		padding: 12px 10px;
		i{
			font-size:14px;
		}
	}
}
.collect-info{
	li{
		padding: 2px 2px 2px 5px;
		position: relative;
		border: 1px solid #f1f1f1;
		background: #FFF;
		float: left;
		cursor: pointer;
		margin-right: 10px;
		margin-bottom: 10px;
		border-radius: 5px;
		i{
			padding: 2px;
			margin-left: 5px;
		}
	}
	
}
a.addCollectBtn{
	padding: 2px;
	display: inline-block;
}
.form-label{
	padding-bottom: 10px;
	margin-top: 20px;
}
</style>